<template>
  <!--证件模板详情 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      label-width="auto"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证件名称" prop="certificateName">
            <el-input v-model="formData.certificateName" readonly placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="orderNum">
            <label slot="label" v-html="`排&emsp;&emsp;序`" />
            <el-input-number
              v-model="formData.orderNum"
              disabled
              size="medium"
              style="width: 100%"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <label slot="label" v-html="`备&emsp;&emsp;注`" />
            <el-input v-model="formData.remark" :rows="3" readonly type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="证书附件" prop="appFiles">
            <previewImg :img-id-list="filePicList" />
          </el-form-item>
        </el-col>
        <el-col>
          <detailList :read-only="true" :table-data.sync="formData.detailList" />
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// 页面组件- 附件上传
import previewImg from '@/components/basicinfo/previewImg'
// 接口
import { detailCertificateType } from '@/api/superviseBaseInfo/typeConfig/certTypeTemplate'
// 明细列表
import detailList from './detailList'
// 证书图片
import yijian from '@/assets/image/yijian.jpg'
export default {
  components: {
    detailList,
    previewImg
  },
  data() {
    return {
      /* 图片上传 start*/
      filePicList: [], // 上传附件
      /* 图片上传 end*/
      yijian, // 证书
      zhengshuList: [yijian], // 证书回显列表
      /* 表单 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        baseTemp: '',
        orderNum: '',
        certificateName: '', // 证件名称
        remark: '', // 备注
        appFiles: '', // 附件id
        detailList: [] // 字段明细
      }
      /* 表单 end*/
    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyAddForm() // 清空
      this.getDetailById(id)
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailCertificateType(id)
      this.formData = { ...data }
      // 处理文件回显
      this.filePicList = data.appFiles.map(item => item.fileId)
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
      this.formData.detailList = []
      this.filePicList = []
    }
    /* 新增/编辑弹层 end*/
  }

}
</script>

<style>

</style>
